<template>
  <div class="about">
    <div class="site-content grid-line">
      <div class="content-warp">
        <div class="about-site about-info">
          <section-title><span class="iconfont icon-wodeshuiguoicon-"></span>关于博主</section-title>
          <div class="info-card" v-for="item in aboutUser" :key="item.id">
            <mk-md-editor class="md-edit" mode="preview" v-model="item.aboutContent" />
          </div>
        </div>
        <div class="about-site about-info">
          <section-title><span class="iconfont icon-wodeshuiguoicon-"></span>聊天室</section-title>
          <div class="info-card">

            <el-form :model="chatForm" v-loading="loading" :rules="chat" ref="chatForm" label-width="80px"
              class="demo-ruleForm">
              <div style="display:flex;justify-content: space-around;">
                <el-form-item label="昵称" prop="nick" style="width:100%">
                  <el-input v-model="chatForm.nick" disabled show-word-limit
                    style="width:80%;margin-right:20px;"></el-input>
                </el-form-item>
                <el-form-item label="对象" prop="nick" style="width:100%">
                  <el-select v-model="SingleChat.Online" @change="selectChange()"  show-word-limit style="width:70%;margin-right:20px;">
                    <el-option value="0" label="群聊" selected>群聊</el-option>
                    <el-option v-for="(item,id) in SingleChat.chatOnline" :key="id" :value="item.connectionId" :label="item.name">{{item.name}}</el-option>
                  </el-select>
                  <label style="align-items: center;">在线:{{SingleChat.chatOnline.length}}</label>
                </el-form-item>
              </div>

              <div style="display:flex;justify-content: space-around;">
                <div id="chatBox" class="info-card" style="height:300px;overflow:auto;width:100%;margin-right:10px;">
                  <ul v-for="(item,id) in chatAll" :key="id">
                    <li style="margin: 5px;">{{item}}</li>
                  </ul>
                </div>
                <div id="chatBox" class="info-card" style="height:300px;overflow:auto;width:100%;margin-left:10px;">
                  <ul v-for="(item,id) in chatSingle" :key="id">
                    <li style="margin: 5px;">{{item}}</li>
                  </ul>
                </div>
              </div>

              <el-form-item label="内容" prop="content">
                <el-input type="textarea" v-model="chatForm.content" maxlength="255" show-word-limit></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="overflow:auto;float:right;" size="mini" @click="sendForm('chatForm')"
                  :disabled="chatForm.sendState">发送</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="about-me about-info">
          <section-title id="Guestbook"><span class="iconfont icon-wodeshuiguoicon-"></span>给我留言</section-title>
          <div class="info-card">
            <el-form :model="ruleForm" v-loading="loading" :rules="rules" ref="ruleForm" label-width="80px"
              class="demo-ruleForm">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" maxlength="32" show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="内容" prop="content">
                <el-input type="textarea" v-model="ruleForm.content" maxlength="255" show-word-limit></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="submitForm('ruleForm')">提交</el-button>
                <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
              <el-form-item>
                <p>🤸‍♀️🤸‍♂️邮箱只是作为博主回复留言渠道</p>
                <p>🤸‍♀️🤸‍♂️您的留言信息不会展示在这里，只有博主会看到...</p>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="dialog" v-if="show">
          <div><i class="el-icon-info"></i>{{ msg }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sectionTitle from '@/components/section-title'
import {getTime, getTimeInterval} from '@/utils'
import {getMessageCreate} from "../api/friends";
import {dirAboutList,dirgetOnline } from "../api/website";
import MkMdEditor from "../components/md-editor";

export default {
  name: "About",
  data() {
    return {
      aboutUser: [],
      list: [],
      loading: false,
      show: false,
      msg: '提示信息',
      chatForm: {
        nick: '',
        content: '',
        sendState:true,
        nickState:true
      },
      SingleChat: {
        chatOnline: [],
        Online: "0",
      },
      chat:{
        nick: [
          {required: true, message: '请输入您的昵称', trigger: 'blur'}
        ],
        content: [
          {required: true, message: '发送内容不能为空', trigger: 'blur'}
        ]
      },
      ruleForm: {
        email: '',
        content: ''
      },
      rules: {
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ],
        content: [
          {required: true, message: '请输入您的留言内容', trigger: 'blur'}
        ]
      },
      chatAll:["群聊"],
      chatSingle:["单聊"],
    }
  },
  components: {
    MkMdEditor,
    // Quote,
    sectionTitle
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          getMessageCreate(this.ruleForm).then(res => {
            this.loading = false
            this.show = true
            this.msg = '留言成功,博主会以邮件回复你哦！'
            setTimeout(() => {
              this.show = false
            }, 3000)
            this.$refs['ruleForm'].resetFields();
          }).catch(err => {
            this.show = true
            this.msg = '网络错误！'
            setTimeout(() => {
              this.show = false
            }, 1300)
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    sendForm(formName){
       
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //发送消息
          if (this.SingleChat.Online != "0") {
            this.signalr.invoke("SendMessageToClient", this.SingleChat.Online,this.chatForm.nick, this.chatForm.content).catch(function (err) {
              return console.error(err.toString());
            });
          } else {
            this.signalr.invoke("SendMessage", this.chatForm.nick, this.chatForm.content).catch(function (err) {
              return console.error(err.toString());
            });
          }
         
          this.chatForm.content="";

            //聊天窗口滚轮保持在底部
          var div=document.getElementById('chatBox');
          div.scrollTop = div.scrollHeight;
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getAboutUser() {
      dirAboutList().then(res => {
        this.aboutUser = res
      })
    },
    getOnline(){
      var that=this;
      //获取在线人数
      dirgetOnline().then(res => {
        that.SingleChat.chatOnline = res;
      })
    },
    selectChange(){
      console.log(this.SingleChat);
    }
  },
  mounted() {
    this.getOnline();
    this.getAboutUser();
     //打开连接
      this.signalr.start().then(() => {
        this.chatForm.sendState = false;
        console.log("连接成功");
      })
     
    //接收消息
    var that = this;
    this.signalr.off('ReceiveMessage');
    this.signalr.on('ReceiveMessage', function (user, message) {
      if (that.chatForm.nickState) {
        var username = message.substring(message.indexOf('「') + 1, message.indexOf('」'));
        that.chatForm.nick = username;
        that.chatForm.nickState = false;
      }
     that.getOnline();
      that.chatAll.push(user + "：" + message);
    })
    this.signalr.on('ReceiveMessageToClient', function (user, message) {
      that.chatSingle.push(user + "：" + message);
    })

  }
}
</script>
<style scoped lang="less">
.about {
  padding-top: 40px;
}

.content-warp {
  margin-top: 80px;

  .about-info {
    margin: 30px 0;

    span {
      color: red;
      margin-right: 10px;
    }

    .info-card {
      min-height: 100px;
      padding: 20px;
      border-radius: 3px;
      margin: 30px 0 50px 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      p {
        line-height: 1.7rem;
      }
    }
  }

  .contactForm {
    width: 100%;
    padding: 20px;

    .form-item {
      align-items: center;
      display: flex;
      
      &:not(:last-child) {
        margin-bottom: 20px;
      }

      label {
        width: 80px;
      }

      .v {
        min-height: 40px;
        line-height: 20px;
        border-radius: 3px;
        padding: 2px 10px;
        outline: none;
        border: 1px solid #8fd0cc;
        width: 100%;
        resize: vertical;
      }

      button {
        width: 100px;
        height: 40px;
        border-radius: 3px;
        outline: 0;
        border-style: none;
        cursor: pointer;
        background-color: #409eff;
        color: white;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

/*******/
@media (max-width: 800px) {
  .content-warp {
    margin-top: 0;
  }
}
</style>
<style lang="less">
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  font-size: 13px;
  transition: all .5s ease-in-out;
  background: #bdc3c7;
  background: -webkit-linear-gradient(to right, #b5babf, #bdc3c7);
  background: linear-gradient(to right, #b5babf, #bdc3c7);

  .el-icon-info {
    margin-right: 5px;
  }

}
</style>
